<template>
	<view class="login">
		<view class="loginContent">
			<view class="message-tip titleContent">
				<view class="inputCodeTip">请输入验证码</view>
			</view>
			<view class="code-tip">
				<text class="left">已向 {{ phoneNumber }} 发送了验证码</text>
				<button
					@click="sendMessage"
					:disabled="codeBtn.disabled"
					class="get-code"
					:plain="true"
				>
					{{ codeBtn.text }}
				</button>
			</view>
		</view>
		<view class="code-input">
			<input
				ref="captcha"
				:focus="captcha.focus"
				@blur="captcha.focus = false"
				maxlength="6"
				type="number"
				v-model="captcha.value"
				:style="{
					position: `absolute`,
					width: `100%`,
					height: `100%`,
					zIndex: 99,
					color: `transparent`,
				}"
			/>

			<label
				@click="captcha.focus = true"
				:style="{
					position: `relative`,
					margin: `30rpx 0`,
					display: `flex`,
				}"
			>
				<text
					v-for="(item, index) in captcha.count"
					:key="index"
					:style="{ fontSize: `50rpx`, flex: 1 }"
					:class="[
						'frame',
						{
							focus: captcha.value.length === index,
						},
					]"
				>
					{{ captcha.value[index] }}
				</text>
			</label>
		</view>

		<input
			:style="{
				padding: `60rpx 30rpx 10rpx`,
				borderBottom: `1rpx solid #d2d2d2`,
			}"
			type="password"
			v-model="password"
			placeholder="请输入密码"
		/>
		<view class="regBtn" @click="register">注册</view>
	</view>
</template>
<script>
	import { Storage } from "@/static/utils";
	export default {
		data() {
			return {
				captcha: {
					value: "",
					focus: true,
					count: 6,
				},

				phoneNumber: "",
				inviteCode: "",
				password: "",

				codeBtn: {
					text: "获取验证码",
					disabled: false,
					count: 60,
				},
			};
		},
		onLoad({ phone, yqm }) {
			this.phoneNumber = phone;
			this.inviteCode = yqm;
			this.sendMessage();
		},

		methods: {
			register() {
				if (!this.captcha.value || !this.password) {
					uni.showToast({
						title: "请检查验证码或密码是否输入",
						icon: "none",
					});
					return;
				}

				this.$request
					.post("/Home/Login/registerall", {
						phone: this.phoneNumber,
						code: this.captcha.value,
						yqm: this.inviteCode,
						pwd: this.password,
					})
					.then(({ data }) => {
						Storage.set("token", data.token);
						uni.switchTab({ url: "/pages/index/index" });
					});
			},
			countdown() {
				const { codeBtn } = this;
				codeBtn.disabled = true;
				this.timer = setInterval(() => {
					codeBtn.count--;
					codeBtn.text = `${codeBtn.count}s后再试`;

					if (codeBtn.count <= 0) {
						codeBtn.disabled = false;
						codeBtn.text = "重新获取";
						codeBtn.count = 60;
						this.timer && clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000);
			},
			sendMessage() {
				if (this.codeBtn.disabled) return;
				uni.showToast({ title: "Loading...", icon: "loading", mask: true });
				this.$request
					.post("/Home/Login/xgzlmobile", {
						mobile: this.phoneNumber,
						type: "sms",
					})
					.then(({ msg: title }) =>
						uni.showToast({
							title,
							icon: "none",
							success: this.countdown,
						})
					);
			},
		},
	};
</script>
<style lang="scss" scoped>
	.login {
		padding: 100rpx 20rpx 0;
		box-sizing: border-box;

		.loginContent {
			.titleContent {
				display: flex;

				.inputCodeTip {
					font-size: 48rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 600;
					color: #2a62ff;
					line-height: 60rpx;
				}

				.rightText {
					display: flex;
					margin-left: 149rpx;
				}
			}

			.message-tip {
				color: #666666;
				line-height: 30px;
			}

			.code-tip {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi;
				.left {
					font-size: 30rpx;
					color: #1a1a1a;
				}
				.get-code {
					margin: 0;
					border: none;
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #2a62ff;
					line-height: 2;
				}
			}
		}
	}

	.code-input {
		display: flex;
		flex-direction: column;
		position: relative;
		.frame {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			height: 100rpx;
			background-color: #eee;
			border-radius: 6rpx;
			margin: 10rpx;
			&.focus {
				border: 1px solid #ccc;
			}
		}
	}

	.regBtn {
		margin-top: 150rpx;
		width: 100%;
		height: 80rpx;
		background: #2a62ff;
		border-radius: 10rpx;
		font-size: 34rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #ffffff;
		line-height: 80rpx;
		text-align: center;
	}
</style>
